<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        ImageSwitch
    </ui:define>

    <ui:define name="description">
        ImageSwitch is an image gallery component with 25+ effects.
    </ui:define>

    <ui:param name="documentationLink" value="/components/imageswitch" />

    <ui:define name="implementation">

        <h3 style="margin-top:0">Manual</h3>
        <p:commandButton type="button" onclick="PF('switcher').previous();"
            icon="pi pi-caret-left" id="prev" style="margin-bottom: 5px"/>
        <p:commandButton type="button" onclick="PF('switcher').next();"
            icon="pi pi-caret-right" id="next" style="margin-bottom: 5px"/>

        <p:imageSwitch effect="wipe" widgetVar="switcher" id="manuelSwitcher"
            slideshowAuto="false">
            <ui:repeat value="#{imagesView.images}" var="image" id="manuelSwitcherImages">
                <p:graphicImage name="/demo/images/nature/#{image}" id="image"/>
            </ui:repeat>
        </p:imageSwitch>

        <h3>Fade</h3>
        <p:imageSwitch effect="fade" id="fadeEffect">
            <ui:repeat value="#{imagesView.images}" var="image" id="fadeEffectImages">
                <p:graphicImage name="/demo/images/nature/#{image}" id="image" />
            </ui:repeat>
        </p:imageSwitch>

        <h3>Zoom</h3>
        <p:imageSwitch effect="zoom">
            <ui:repeat value="#{imagesView.images}" var="image">
                <p:graphicImage name="/demo/images/nature/#{image}" />
            </ui:repeat>
        </p:imageSwitch>

        <h3>TurnDown</h3>
        <p:imageSwitch effect="turnDown">
            <ui:repeat value="#{imagesView.images}" var="image">
                <p:graphicImage name="/demo/images/nature/#{image}" />
            </ui:repeat>
        </p:imageSwitch>

        <h3>Shuffle</h3>
        <p:imageSwitch effect="shuffle">
            <ui:repeat value="#{imagesView.images}" var="image">
                <p:graphicImage name="/demo/images/nature/#{image}" />
            </ui:repeat>
        </p:imageSwitch>

        <h3>Dialog Integration</h3>
        <p:commandButton type="button" value="Show" onclick="PF('dlg').show()" icon="pi pi-home"/>

        <p:dialog header="Images" widgetVar="dlg" modal="true"
            draggable="false" resizable="false">

            <p:imageSwitch effect="fade">
                <ui:repeat value="#{imagesView.images}" var="image">
                    <p:graphicImage name="/demo/images/nature/#{image}" />
                </ui:repeat>
            </p:imageSwitch>
        </p:dialog>
            
    </ui:define>

</ui:composition>